var DropdownControl = Class.create(BaseControl, {
    attached:null,
    view:null,
    overlay:null,
    content:null,

    initialize: function(element, content)
    {
        this.events = new Hash();
        this.attached = $(element);
        this.attached.dropdown = this;
        this.overlay = Builder.node('div', {className: 'drop_overlay', style:'display:none'});
        this.content = content ? $(content) : $(element.getAttribute('drop'));
        var view = this.content.up('.drop_control');
        if (view)
            this.view = view;
        else
        {
            this.view = Builder.node('div', {className: 'drop_control', style:'display:none; position:absolute; z-index:98'});
            this.view.update(this.content);
            document.body.appendChild(this.view);
        }

        this.observeEvent();
        document.body.appendChild(this.overlay);
    },

    observeEvent: function()
    {
        var me = this;
        this.attached.observe('click', function(){
            me.show();
        });
		this.overlay.observe('click', function(){
			me.hide();
		})
    },

    show: function()
    {
        var offset = this.attached.cumulativeOffset();
        var left_px = offset[0]+1+'px';
        var top_px = (offset[1]+this.attached.getHeight())+'px';
        this.view.setStyle({left:left_px, top:top_px});
        this.view.slideDown({duration:0.3, queue:'end'});
        this.overlay.show();
        this.fire('show');
    },

    hide: function()
    {
        this.view.slideUp({duration:0.2, queue:'end'});
        this.overlay.hide();
    }
});